<template>
  <div class="modelInfoTab" :style="{height:tabHeight+'px'}">
    <!-- 查询表单 -->
    <div class="queryFormBox">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="queryForm.clientId" placeholder="请输入客户名称" clearable>
            <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.productId" placeholder="请输入产品名称" clearable>
            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="dateTimeRange" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryFun" icon="el-icon-search" size="small">查询</el-button>
<!--          <el-button type="primary" @click="addFun" icon="el-icon-edit" size="small">新增</el-button>-->
<!--          <el-button type="danger" @click="delsFun" size="small">批量删除</el-button>-->
<!--          <el-button type="success" @click="exportFun" size="small">导出</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table :data="tableInfo.tableData" border >
        <el-table-column v-for="(item,index) in tableInfo.columns" :key="index"
          :prop="item.prop" :label="item.label" :width="item.width" align="center"></el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pageBox">
<!--      fugigiu-->
    </div>
  </div>
</template>

<script>
import { mRequest } from '@/utils/request'
import { getFormatDateTime, timeShortcutOption } from '@/utils'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      queryForm: {
        clientId: '',
        productId: '',
        startDateTime: '',
        endDateTime: '',
      },
      clientList: [], //客户名称
      productList: [], //产品名称
      dateTimeRange: '', //时间范围
      pickerOptions: timeShortcutOption(),
      tableInfo:{
        tableData:[],
        columns:[
          {label: '产品名称', prop: 'productNo'},
          {label: '询价供应商', prop: 'supplierName'},
          {label: '供应商产品编号', prop: 'supplierProductNo'},
          {label: '确定供应商', prop: 'recommendSupplierName'},
          {label: '订单总单价', prop: 'orderUnitPrice'},
          {
            label: '客户开模费用',
            prop: 'clientModelAmount',

            width:130,
          },
          {label: '客户打样费用', prop: 'clientProofingAmount'},
          {label: '客户订单总价', prop: 'clientTotalAmount'},
          {label: '供应商单价', prop: 'supplierUnitPrice'},
          {label: '供应商模具费用', prop: 'supplierModelAmount'},
          {label: '供应商打样费用', prop: 'supplierProofingAmount'},
          {label: '供应商总价格', prop: 'supplierTotalAmount'},
          {label: '交期', prop: 'deliveryDays'},
          {label: '上线时间', prop: 'onlineTime'},
          {label: '运输方式', prop: 'transportWay'},
          {label: '含税价', prop: 'taxInclusive'},
          {label: '财务建议', prop: 'financeApproveDesc'},
          {label: '模具类别', prop: 'modelCategoryName'},

          {label: '备注', prop: 'remark'},

          {
            label: '状态',
            prop: 'status',
            type: 'radio',
            items: [
              {value: 0, text: '禁用', tagType: 'danger'},
              {value: 1, text: '正常'}
            ]
          }
        ],

      }
    }
  },
  watch: {},
  computed: {},
  props:{
    tabHeight:{
      type: Number,
      default: 0
    }
  },
  created() { },
  mounted() {
    this.getSelectData()
    this.initTableData()
    console.log(this.tabHeight)
  },
  methods: {
    // 查询
    queryFun() {
      this.queryForm.startDateTime = this.dateTimeRange ? getFormatDateTime(this.dateTimeRange[0]) : ''
      this.queryForm.endDateTime = this.dateTimeRange ? getFormatDateTime(this.dateTimeRange[1]) : ''
      console.log(this.queryForm)
    },
    // 新增
    addFun() {

    },
    // 批量删除
    delsFun() {

    },
    // 导出
    exportFun() {

    },
    // 下拉框数据
    getSelectData() {
      mRequest('clientApi/getClientList', {}, ({ data }) => {
        this.clientList = data['list']
      })
      mRequest('orderApi/getOrderModelProductList', {}, ({ data }) => {
        this.productList = data['list']
      })
    },
    // 表格数据
    initTableData() {

    },
  },
}
</script>
<style lang="scss" scoped>
.modelInfoTab {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}
.queryFormBox {
  .el-button--danger {
    background-color: #ffa4a4;
    border-color: #ffa4a4;
  }
}
.tableBox{
  flex: 1;
  margin-bottom: 30px;
}
.pageBox{
  height: 32px;
}
</style>
